<%@ page import="org.gnomus.server.Context" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONObject" %>
<%@ page import="com.google.appengine.repackaged.org.json.JSONException" %>
<%-- controller = game, action = play --%>
<%
  Context ctx = Context.get();
  Gson gson = new Gson();
  Map game = (Map) ctx.data.get("game");
  List<Map> gbs = (List<Map>) game.get("game_board");
%>
<script>
  $(document).ready(function() {
    <%
    if (gbs != null && gbs.size() > 0) {
    %>
    ps.init('<%= game.get("id") %>', <%= gson.toJson(gbs) %>);
    <%
    } else {
    %>
    alert("Error initializing game");
    <%
    }
    %>
  });
</script>
<div id="ipt">
  <button class="f-right" onclick="ps.showGameBoard();">Skip intro</button>
  <h3>Periodic Squares : Introduction</h3>
  <p>
    Before playing this game there are a few things you should know...
  </p>
  <p>
    Elements, over 100 different kinds, make up everything in our solar system and these
    elements can be arranged based on their physical properties in a Periodic Table.
  </p>
  <p>
    In a Periodic Table, each square provides us some basic information about a specific
    element's atoms. Using this information, one can draw an abstract atomic model that
    tells us the number of protons, neutrons, valence electrons, and non-valence
    electrons&#185; for any element's atoms. These models can then be used to predict how
    the various atoms will interact with one another.
  </p>
  <table>
    <tr>
      <td class="a-center">
        <a href="http://lbl.gov/abc/marsh-nuclei/images/table_sig.jpg" target="_blank">
          <img src="/images/lbl_table.png" alt="Lawrence Berkeley National Laboratory's Periodic Table">
        </a>
        <br />
        <p class="caption a-right">
          &#169; 1999 Lawrence Berkeley National Laboratory
        </p>
      </td>
    </tr>
  </table>
  <p>
    There are many other versions of the table that you can find on the internet.
    <a href="http://www.ptable.com">ptable.com</a> has a great interactive periodic table.
    One can also do a google image search for
    <a href="http://goo.gl/opuUu">some more examples</a>.
    Check out the <a href="http://goo.gl/UMqQE">wiki page</a> on the Periodic
    Table if you're curious to know more.
  </p>
  <p>
    <button class="f-right" onclick="ps.showReview()">Continue</button>
    <div class="clear"></div>
  </p>
  <hr />
  <p class="footnote">
    &#185; The valence electrons shown in our atomic models are those that are
    involved in chemical reactions, except for those elements that are inert.
  </p>
</div>
<div id="ips" class="d-none">
  <button class="f-right" onclick="ps.showGameBoard();">Skip intro</button>
  <h3>Periodic Squares : Introduction</h3>
  <p>
    And a few things you should know before playing this game...
  </p>
  <table>
    <tr>
      <td>
        <canvas id="sample-model" class="f-left" width="200" height="220"></canvas>
      </td>
      <td>
        <p>
          In this game, you will be presented a simple atomic model of
          an element such as the one on the left that shows (for the element Cl)
          the number of protons (17), neutrons (18), valence electrons (7), and
          non-valence electrons (10) of the atom.
        </p>
        <p>
          Using your knowledge of elements, you will determine the atomic
          number of this element and match it to the correct Periodic Square.
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <canvas id="sample-square" class="f-left" width="220" height="220"></canvas>
      </td>
      <td>
        <p>
          The Periodic Squares in this game tell us the element's symbol,
          name, atomic number, and atomic mass&#178;. The atomic number is
          determined by the number of protons in each of an element's atoms
          and defines their behavior in chemical interactions. The atomic
          mass is the mass of one atom of that element in atomic mass
          units.
        </p>
      </td>
    </tr>
  </table>
  <p>
    <button class="f-left" onclick="ps.showIntro()">Back</button>
    <button class="f-right" onclick="ps.showPeriodicSquareAnatomy()">Continue</button>
    <div class="clear"></div>
  </p>
  <hr />
  <p class="footnote">
    &#178; Each proton and each neutron in an atom contributes one atomic mass
    unit to an element's atomic mass. Since the number of neutrons varies
    from atom to atom in nearly all of the elements, atomic mass are often not
    precise integers. In this example, Cl, there are an average of 18.453 neutrons
    (rounded off to 18 in the model) and precisely 17 protons in each atom, giving
    the atom an atomic mass of 35.453 atomic mass units.
  </p>
</div>
<div id="rps" class="d-none">
  <h2 class="a-center" style="padding:0 150px 16px 0;">
    Periodic Squares : Review
  </h2>
  <canvas width="900px" height="300px"></canvas>
  <p>
    <button class="f-left" onclick="ps.showReview()">Back</button>
    <button class="f-right" onclick="ps.showAtomicModelAnatomy()">Continue</button>
    <div class="clear"></div>
  </p>
</div>
<div id="ram" class="d-none">
  <h2 class="a-center" style="padding:0 150px 16px 0;">
    Periodic Squares : Review
  </h2>
  <canvas width="900px" height="400px"></canvas>
  <table>
    <tr>
      <td class="a-left">
        <button onclick="ps.showPeriodicSquareAnatomy()">Back</button>
      </td>
      <td class="a-center">
        <p class="xlarge">What is the missing periodic square?</p>
      </td>
      <td class="a-right">
        <button onclick="ps.showGameBoard()">Continue</button>
      </td>
    </tr>
  </table>
  </p>
</div>
<div id="gbf" class="d-none">
  <h3>Periodic Squares: Game Board</h3>
  <table style="margin: 0 auto;">
    <tr>
      <td class="a-left" style="width:120px;">
        <button onclick="ps.showPeriodicSquareAnatomy()">Review</button>
      </td>
      <td class="a-center">
        <canvas width="640px" height="1000px"></canvas>
      </td>
      <td class="a-right" style="width:120px;">
        <button onclick="ps.showChooseMPS()">Continue</button>
      </td>
    </tr>
  </table>
</div>
<div id="cms" class="d-none">
  <h3>Periodic Squares : Find the Missing Element</h3>
  <div class="a-center">
    <table class="a-center" style="margin: 0 auto;">
      <tr>
        <td>
          <button onclick="ps.showGameBoard()">View gameboard</button>
        </td>
        <td>
          <canvas class="am d-inline" width="200px" height="200px"></canvas>
        </td>
        <td>
          <table id="drop_ps" ondragover="dnd.over(event)" ondrop="dnd.drop(event)">
            <tr>
              <td>
                <div class="drop-instruction">
                  Drag and drop the missing periodic square here
                </div>
                <canvas class="sps d-none" width="180px" height="180px"></canvas>
              </td>
            </tr>
          </table>
        </td>
        <td>
          <button class="confirm d-none" onclick="ps.confirmChoice()">Confirm choice</button>
        </td>
      </tr>
      <tr class="answers">
        <%
          for (int i = 0; i < 4; i++) {
        %>
        <td>
          <div class="a-center" ondragstart="dnd.start(event)" ondrag="dnd.drag(event)" ondragend="dnd.dragEnd(event)">
            <canvas class="ps<%= i %> d-inline" width="180px" height="180px" draggable="true"
                    data-value="<%= i %>">
            </canvas>
          </div>
        </td>
        <%
          }
        %>
      </tr>
    </table>
  </div>
</div>
<div id="ccr" class="d-none">
  <h3> </h3>
  <table>
    <tr>
      <td>
        <div>
          <canvas class="am" width="240px;" height="200px;"></canvas>
        </div>
      </td>
      <td class="text">
      </td>
      <td>
        <canvas class="ps d-none" width="220px;" height="180px;"></canvas>
      </td>
    </tr>
  </table>
  <p class="a-right">
    <button class="next d-none" onclick="ps.showChooseMPS()">Next</button>
    <button class="score d-none" onclick="ps.showScore()">Score</button>
  </p>
</div>
<div id="scf" class="d-none">
  <h3>Score</h3>
  <table style="width: 900px;">
    <tr>
      <td>
        Score
      </td>
    </tr>
    <tr>
      <td class="a-center">
        <button onclick="ps.showIntro()">Restart</button>
      </td>
    </tr>
  </table>
</div>
